<!DOCTYPE html>
<html>
<head>
	<title>发弹幕</title>
	<meta charset="utf-8">
	<style>
		input[type=range]{ 
				 margin-top: 8px;
			         outline: none; 
				 -webkit-appearance: none;/*清除系统默认样式*/  
				 width:222px !important;  
				 background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd;  
			         /*background-size: 30% 100%;*/
			         /*设置左右宽度比例  */
				height: 3px;/*横条的高度*/  
		} 
		 /*拖动块的样式*/  
		   input[type=range]::-webkit-slider-thumb {  
			 -webkit-appearance: none;/*清除系统默认样式*/  
			height:16px;/*拖动块高度*/  
		        width: 16px;/*拖动块宽度*/  
		        background: #fff;/*拖动块背景*/  
			border-radius: 50%; /*外观设置为圆形*/  
			 border: solid 1px #ddd; /*设置边框*/  
		} 
		#range{
			padding:3px;
		}
	</style>
</head>
<body>
<!-- // index.html文件 -->
<div class="wrap" style="text-align: center;">
    <h1>听妈妈的话 - 周杰伦</h1>
    <div class="main" style="margin: 0 auto;position: relative;">
        <canvas id="canvas" style="position: absolute;"></canvas>
        <video src="./sintel.mp4" id="video" controls width="720" height="480"></video>
    </div>
    <div class="content">
        <input type="text" id="text">
        <input type="button" value="发弹幕" id="btn">
        <input type="color" id="color">
        <!-- <input type="range" max="40" min="20"> -->
        <select id="range">
			<option value="20">20</option>
			<option value="24">24</option>
			<option value="28">28</option>
			<option value="32">32</option>
			<option value="36">36</option>
			<option value="40">40</option>
        </select><span>字号</span>
        <input type="range" id="speed" max="40" min="10"><span>速度</span>
    </div>
</div>
<!-- // 引入index.js文件用来实现弹幕功能 -->
<script src="./index.js"></script>


</body>
</html>